<template>
	<div class="filter clearfix">
		<span class="title">{{title}}：</span>
		<!-- <div v-if="!isFixedNumber" style="width: calc(100% - 70px);float: left;">
			<template v-for="(item,index) in list" >
				<a-checkable-tag :key="item.value" :checked="item.value==myValue"
					@change="checked => changeTag(item, checked)">
					{{ item.text }}
				</a-checkable-tag>
			</template>
		</div>
		<div v-else  style="width: calc(100% - 70px);float: left;">
			<template v-for="(item,index) in list.slice(0,fixedNumber)">
				<a-checkable-tag :key="item.value" :checked="item.value==myValue"
					@change="checked => changeTag(item, checked)">
					{{ item.text }}
				</a-checkable-tag>
			</template>
			<span class="toggle" @click="toggle" v-if="list.length>fixedNumber&&!isMore">更多<a-icon type="down" class="icon" /></span>
			<div style="margin: 10px 0;" v-if="list.length>fixedNumber&&isMore">
				<template v-for="(item,index) in list.slice(fixedNumber,list.length)">
					<a-checkable-tag :key="item.value" :checked="item.value==myValue"
						@change="checked => changeTag(item, checked)">
						{{ item.text }}
					</a-checkable-tag>
				</template>
				<span class="toggle" @click="toggle">收起<a-icon type="up" class="icon" /></span>
			</div> 
		</div> -->
		<div style="width: calc(100% - 70px);float: left;">
			<div class="poster-list">
				<!-- <div class="poster-txt" :style="{'height': isMore?'auto':'2.2rem'}" :class="[!isMore?'xg':'']"> -->
				<div class="poster-txt" :style="{'height': isMore?'auto':'1.7rem'}">
					<template v-for="(item,index) in list">
						<a-checkable-tag :key="item.value" :checked="item.value==myValue"
							@change="checked => changeTag(item, checked)">
							{{ item.text }}
						</a-checkable-tag>
					</template>
				</div>
				<span class="toggle-btn" @click="toggle" v-if="!isMore&&isHasMore">更多<a-icon type="down" class="icon" /></span>
				<span class="toggle-btn" @click="toggle"  v-if="isMore&&isHasMore">收起<a-icon type="up" class="icon" /></span>
			</div>


		</div>
	</div>
</template>

<script>
	export default {
		name: 'filterTag',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			value: {
				type: String | Number,
				default: '' | null
			},
			title: {
				type: String,
				default: ''
			},
			isFixedNumber: {
				type: Boolean,
				default: false
			},
			fixedNumber: {
				type: Number,
				default: 12
			}
		},
		data() {
			return {
				myValue: this.value,
				isMore: false,
				clientWidth: 1367
			}
		},
		watch: {
			value(newValue) {
				this.myValue = newValue
			},
			myValue(newValue) {
				/* if (this.triggerChange) {
					this.$emit('change', newValue ? newValue : '')
				} else {
					console.log(2)
					this.$emit('input', newValue ? newValue : '')
				} */
			}
		},
		computed: {
			strLen() {
				let nameStr='';
				if(this.list&&this.list .length>0){
					this.list.forEach(item=>{
						nameStr+=item.text
					})
				}
				return nameStr.length
			},
			
			isHasMore() {
				if(this.clientWidth>=1920){
					if(this.strLen>=58){
						return true
					}else{
						return false
					}
				}else{
					if(this.strLen>=48){
						return true
					}else{
						return false
					}
				}
			}
		},
		mounted() {
			this.clientWidth = document.documentElement.clientWidth;
			console.log(this.clientWidth + 'px');
			window.addEventListener('resize', () => {
				this.resize_window();
			});
		},
		methods: {
			resize_window() {
				// 因为设计图是带1920*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
				let myWidth = document.documentElement.clientWidth;
				let myHeight = document.documentElement.clientHeight;
				this.clientWidth = document.documentElement.clientWidth;
				console.log(this.clientWidth + 'px');
			},
			toggle() {
				this.isMore = !this.isMore;
			},
			//切换角色
			changeTag(item) {
				this.myValue = item.value
				this.$emit('change', this.myValue)
			},
		}
	}
</script>

<style lang="less" scoped>
	.filter {
		padding: 5px 24px 0;

		.title {
			text-align: right;
			width: 70px;
			display: inline-block;
			float: left;
		}

		/deep/.ant-tag {
			cursor: pointer;
			font-size: 14px;
			margin-right: 20px;
			padding: 0 10px;
			margin-bottom: 6px;
		}

		.toggle {
			color: #00BEC5;
			cursor: pointer;

			.icon {
				margin-left: 7px;
			}
		}

		.toggle-btn {
			color: #00BEC5;
			cursor: pointer;
			.icon {
				margin-left: 7px;
			}
		}
		.poster-list{
			position: relative;
			width: 100%;
		}
		.poster-list img {
			width: 100%;
		}

		.poster-list .poster-txt {
			position: relative;
			overflow: hidden;
			transition: height 0.24s;
			width: calc(100% - 55px);
		}

		.poster-list .poster-txt.xg:after {
			content: "";
			position: absolute;
			bottom: 0;
			display: block;
			width: calc(100% - 55px);
			height: 4rem;
			background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
			background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		}

		.toggle-btn {
			outline: none;
			display: block;
			// width: 50%;
			line-height: 2;
			// color: @primary-color;
			font-size: 14px;
			text-align: center;
			//background: url(../images/arrowposter.jpg) no-repeat 3rem center;
			position: absolute;
			top: -3px;
			right: 0;
		}

		.current-menu {
			//background: url(../images/arrowposterhui.jpg) no-repeat 2.7rem center;
			content: '';
			display: block;
		}
	}
</style>
